<template>
  <div>
    <el-dialog title="上传文件" :visible.sync="dialogVisible" width="400px" @close="cancel()">
      <el-upload
          ref="upload"
          action="../api/upload/import"
          class="upload-demo"
          :multiple="false"
          :limit="1"
          accept=".xlsx"
          :auto-upload="false"
          :data="param"
          :headers="headers"
          :on-change="handleChange"
          :on-success="success">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传excel文件</div>
      </el-upload>
      <div slot="footer">
        <el-button type="primary" @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'upload-file',
  data() {
    return {
      dialogVisible: false,
      file: '',
      param: {
        ContentType: 'multipart/form-data'
      },
      headers: {
        'authorization': window.sessionStorage.getItem(('tokenStr'))
      }
    }
  },
  mounted() {

  },
  methods: {
    handleChange(file, fileList) {
      if (file) {
        if (file.name.indexOf('xlsx') !== -1) {
          this.file = file
        } else {
          this.$message({
            message: '请上传xlsx格式的文件！',
            type: 'warning'
          });
        }
      }
    },
    openUploadFile(val) {
      this.param.type = val
      this.dialogVisible = true
    },
    cancel() {
      this.param.type = ''
      this.dialogVisible = false
      this.$refs.upload.clearFiles()
    },
    submit() {
      if (this.file) {
        this.$refs.upload.submit();
      } else {
        this.$message({
          message: '请上传xlsx格式的文件！',
          type: 'warning'
        });
      }
    },
    success(response, file, fileList) {
      console.log(response)
      if (!response.status) {
        this.$message({
          message: response.message,
          type: 'error',
          duration: 3000
        });
      } else {
        let data = response.data
        const context = []
        const h = this.$createElement
        context.push(h('p', null, '导入成功：' + data.successRow + '条'))
        context.push(h('p', null, '导入失败：' + data.errorRow.length + '条'))
        if (data.errorRow.length > 0) {
          context.push(h('p', null, '失败：'))
          const errorRow = []
          for (let item of data.errorRow) {
            errorRow.push(h('p', null, item))
          }
          context.push(h('div', {
            style : {
              maxHeight: '300px',
              overflow: 'auto'
            }
          }, errorRow))
        }
        this.$confirm(h('div', null, context), '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.cancel()
          this.$emit('loadTable', 1)
        }).catch(() => {
          this.cancel()
          this.$emit('loadTable', 1)
        })
      }

    }
  }
}
</script>

<style scoped>
</style>
